<!-- 交易订单统计 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="用户ID">
                            <a-input v-model="queryUserId" allow-clear placeholder="请输入用户ID" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="订单时间">
                            <a-date-picker v-model="statisticsDate" :disabled-date="disabledDate" format="YYYY-MM-DD" @change="dateChange"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item >
                            <a-button type="primary" style="margin-right: 20px" @click="getData()">查询</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size, showTotal: (total) => `交易笔数：${total}条`, pageSizeOptions: ['10','20','50','100','500']}" size="small" :scroll="{ x: 1500, }">
            <div slot="orderType" slot-scope="orderType">
                <div v-for="(item,i) in orderTypeList" :key="item.id">
                    <a-tag v-if="item.id == orderType" :color="colors[i%13]">{{item.name}}</a-tag>
                </div>
            </div>
            <div slot="status" slot-scope="status">
                <div v-for="item in statusList" :key="item.id">
                    <span :class="`status${status}`" v-if="item.id == status">{{item.name}}</span>
                </div>
            </div>
            <div slot="productName" slot-scope="productName,record">
                <div v-if="productName">
                    <div style="font-size: 12px;color: #666">名称：{{productName}}</div>
                    <div>ID：{{record.productId}}</div>
                </div>
                <div v-else>-</div>
            </div>
        </a-table>

    </div>
</template>

<script>
import { columns } from './table';
import { queryExternalReleasePaymentOrdeerStatistics } from '@/api/order';
import moment from 'moment';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            brandList: [],
            dataList: [],
            total: 0,
            isload: false,
            page: 1,
            size: 10,
            queryUserId: '', // 用户ID
            statisticsDate: moment().format('YYYY-MM-DD'), // 统计日期
            userId: sessionStorage.getItem('userId'),
            columns: columns,
        };
    },
    async created(){
        this.getData()
    },
    methods: {
        moment,
        // 查询交易订单
        getData(){
            let _this = this
            _this.isload = true
            console.log(_this.statisticsDate,'statisticsDate')
            const params = {
                'brandId':_this.brandId,
                'userId':_this.userId,
                'queryUserId':_this.queryUserId,
                'statisticsDate': _this.statisticsDate,
                'size':_this.size,
                'page':_this.page - 1,
            }
            queryExternalReleasePaymentOrdeerStatistics(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    _this.dataList = res.data.content
                        _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 日期选择
        dateChange(date, dateString){
            this.statisticsDate = dateString;
            this.getData();
        },
        disabledDate(current) {
            // Can not select days before today and today
            return current > moment().endOf('day');
        },
    }
}

</script>
<style scoped>
.status0{
    color: #faad14
}
.status1{
    color: #52c41a
}
.status2{
    color: #f5222d
}
.status3{
    color: #faad14
}
.status4{
    color: #faad14
}
.status5{
    color: #52c41a
}
.status6{
    color: #faad14
}
.status7{
    color: #f5222d
}
.status8{
    color: #52c41a
}
.handleStatus0,.handleStatus1{
    color: #faad14
}
.handleStatus2{
    color: #52c41a
}
.handleStatus3{
    color: #f5222d
}
.handleStatus4{
    color: #52c41a
}

.flex{
    display: flex;
    align-items: center;
}
</style>